<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>Title</title>
    <script src="/static/echarts.min.js"></script>
    <div th:include="header::common_resource"></div>
</head>
<body>

<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    $.post(
        '/echarts/getData',
        function (jsonObj) {
            console.log(jsonObj);
            var XArray = [];
            var YArray = [];
            $(jsonObj).each(function () {
                XArray.push(this.name);
                YArray.push(this.value);
            });

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '商品交易额'
                },
                tooltip: {},
                legend: {
                    data: ['金额']
                },
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        formatter : function(params){ // ***重点就是这儿***
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 10;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {// 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {// 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                        }
                    },
                    data: XArray
                },
                yAxis: {},
                series: [
                    {
                        name: '金额',
                        type: 'bar',
                        data: YArray
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option);
        },
        'json'
    );

    $.post(
        '/echarts/getMonth',
        function (jsonObj) {
            console.log(jsonObj);
            var XArray = [];
            var YArray = [];
            $(jsonObj).each(function () {
                XArray.push(this.name);
                YArray.push(this.value);
            });

            // 饼状图
            var option = {
                title: {
                    text: '商品交易额',
                    subtext: '2023',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '当月交易额',
                        type: 'pie',
                        radius: '50%',
                        data: jsonObj,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart2.setOption(option);
        },
        'json'
    );




</script>

</body>
</html>
